<template>
  <div class="home-films-view">
    <div class="box">
      <span class="title">猫眼电影</span>
    </div>
    <div class="nav">
      <van-tabs route>
        <van-tab title="热映" :to="{ name: 'hot' }"></van-tab>
        <van-tab title="待映" :to="{ name: 'wait' }"></van-tab>
        <van-tab title="经典电影" :to="{ name: 'classic' }"></van-tab>
      </van-tabs>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { Tab, Tabs } from "vant";
export default {
  name: "HomeFilmsView",
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
  },
};
</script>

<style scoped lang="scss">
.home-films-view {
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  .box {
    height: 50px;
    background-color: #e54847;
    text-align: center;
    line-height: 50px;
    .title {
      color: #fff;
      font-size: 18px;
    }
  }
  .nav {
    height: 44px;
    border-bottom: 2px solid #e6e6e6;
    color: #666;
  }
}
</style>
